<template>
  <div class="box">
    <div class="search">
      <input type="text" placeholder="搜索书架或书城" v-model = "Sword">
      <button @click = "searchwords">搜索</button>
    </div>
    <div class="SearchContent">
      <ul>
        <li @click = "goDetail(item)" class="classD" v-for = "item of list" :key = "item._id">
          <figure>
            <img :src="decodeURIComponent(item.cover).substring(7)">
            <figcaption>
              <header>{{ item.title }} </header>
              <div class="shortIntro">{{ item.shortIntro }}</div>
              <div class="Tautor">
                <a class="iconfont icon-zuozhe" rel="javascript:;">{{ item.author }}</a>
                <p>
                  <span>{{ item.cat }} </span>
                  <span>{{ item.latelyFollower }} </span>
                </p>
              </div>
            </figcaption>
          </figure>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default{
  data () {
    return {
      Sword: '',
      list: []
    }
  },
  methods: {
    searchwords () {
      console.log('111')
      fetch(`/xiaoliang/search?keyword=${this.Sword}`)
        .then(res => res.json())
        .then((data) => {
          console.log(data)
          this.list = data.books
          console.log(this.list)
        })
    },
    goDetail (item) {
      this.$router.push({path: `/detail?id=${item._id}`})
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.search{
  @include rect(100%, 0.4rem)
  background-color: #fff8f5;
  input {
    height:0.4rem ;
    width: 2.8rem;
    padding: 0 0.1rem;
    background-color:#f0f0f2;
    border: none;
    border-radius: 1rem;
    margin:0 0 0 0.2rem;
    font-size: 0.16rem;
    color: #cccccc
  }
  button {
    height: 0.4rem;
    background: none;
    border: none;
    color: #f16b86;
    margin-left: 0.2rem
  }
}
.SearchContent{
  @include overflow()
  ul{
    .classD{
      @include rect(100%, 1.5rem);
      margin:0.06rem 0;
      figure{
        @include rect(100%, 1.5rem);
        @include flexbox();
        @include align-items(space-bettween);
        img{
          @include rect(1rem, auto);
        }
        figcaption{
          margin-left: 0.05rem;
          @include flexbox();
          @include flex-direction(column);
          @include justify-content(space-around);
          .shortIntro{
            height: 0.4rem;
            overflow: hidden;
            color: #cccccc
          }
          .Tautor{
            @include flexbox();
            @include justify-content(space-bettween);
            .icon-zuozhe{
              font-size: 0.12rem;
              color: black;
              margin: 0 0.03rem;
            }
          }
          p{
            font-size: 0.12rem;
            span{
              background-color:#f0eff4;
              border-radius:0.03rem;
              padding:0.05rem;
              margin:0 0.05rem;
            }
          }
        }
      }
    }
  }
}
</style>
